<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div id="box" class="box"></div>
    <!-- 星星 -->
    <div class="tip chance">
      <p><span id="heart"></span>颗</p>
    </div>
    <!-- 金币 -->
    <div class="tip gold">
      <p><span id="coin"></span>个</p>
    </div>
    <!-- 规则 -->
    <img class="bag" src="./assets/bag.png" alt="" />
    <!-- 我的礼品 -->
    <img class="fixbot gift" src="./assets/gift.png" />
    <!-- 骰子 -->
    <img class="fixbot dice" src="./assets/dice.png" />
    <!-- 获奖 -->
    <div class="popup popup1">
      <div class="wrap">
        <div class="bg bg1">
          <div class="ticket"></div>
          <img class="btn" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 减分 -->
    <div class="popup popup2">
      <div class="wrap">
        <div class="bg bg2">
          <img class="event2" src="./assets/event1.png" alt="" />
          <p class="e-word2">遇见土匪，被抢了<span id="minus">30</span>金币</p>
          <img class="btn" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 退步 -->
    <div class="popup popup3">
      <div class="wrap">
        <div class="bg bg2">
          <img src="./assets/event2.png" alt="" class="event2" />
          <p class="e-word2">遇见龙卷风，后退<span id="back">3</span>步</p>
          <img class="btn back-btn" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 答题 -->
    <div class="popup popup4">
      <div class="wrap">
        <div class="bg bg4">
          <div class="q-wrap">
            <div class="quetion">下列答案中谁是唐代诗人</div>
            <div id="asa" class="answer true">
              <span>a.<span id="a">李白</span></span
              ><img class="bool" src="./assets/true.png" alt="" />
            </div>
            <div id="asb" class="answer">
              <span>b.<span id="b">苏轼</span></span
              ><img class="bool" src="./assets/false.png" alt="" />
            </div>
            <div id="asc" class="answer">
              <span>c.<span id="c">李清照</span></span
              ><img class="bool" src="./assets/false.png" alt="" />
            </div>
          </div>
          <p class="tip1">&nbsp;</p>
          <img class="btn" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 我的礼品 -->
    <div class="popup popup5">
      <div class="wrap">
        <div class="bg bg3">
          <div class="gift-list">
            <div class="gift-item">
              <span>腾讯视频vip会员</span>
              <span>X<span>1</span></span>
            </div>
            <div class="gift-item">
              <span>腾讯视频vip会员</span>
              <span>X<span>1</span></span>
            </div>
          </div>
          <span
            style="position: absolute;bottom:10vw;width: 75%;text-align: center;color: #462706;font-weight: bold"
            >奖品领取方式：30/31号到观音桥重百电器美的空调专柜领取。</span
          >
          <img class="btn" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 我的排名 -->
    <div class="popup popup6">
      <div class="wrap">
        <div class="bg bg6">
          <img src="./assets/title.png" class="title" alt="" />
          <div class="tip2">
            <p>您已完成挑战!<br />当前排名：<span id="rank"></span></p>
          </div>
          <img class="btn" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 排行榜 -->
    <div class="popup popup9">
      <div class="wrap">
        <div class="bg bg5">
          <div class="scroll">
            <div class="item">
              <div class="item-word">
                <div class="user"><span>1</span>.<span>濑若拉</span></div>
                <div class="user-coin">金币:<span>40</span></div>
              </div>
            </div>
            <div class="item">
              <div class="item-word">
                <div class="user"><span>2</span>.<span>濑若拉</span></div>
                <div class="user-coin">金币:<span>40</span></div>
              </div>
            </div>
          </div>
          <img class="btn" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 注册 -->
    <div class="popup popup7">
      <div class="wrap">
        <div class="bg bg7">
          <form action="">
            <div class="form-row">
              <span>姓名：</span>
              <input type="text" />
            </div>
            <div class="form-row">
              <span>电话：</span>
              <input type="text" />
            </div>
          </form>
          <img class="btn" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 加分 -->
    <div class="popup popup8">
      <div class="wrap">
        <div class="bg bg3">
          <img class="event2" src="./assets/gold1.png" alt="" />
          <p class="e-word2">挖到了财宝，获得了<span id="add">30</span>金币</p>
          <img class="btn" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 复活 -->
    <div class="popup popup10">
      <div class="wrap">
        <div class="bg bg8">
          <img
            class="event2"
            src="./assets/star1.png"
            style="width:40%;"
            alt=""
          />
          <p class="e-word2">
            今日星星已用完<br />观看视频可复活<br />获得一颗星星。
          </p>
          <img class="btn video" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 规则 -->
    <div class="popup popup11">
      <div class="wrap">
        <div class="bg bg9">
          <div class="rule-wrap" style="background: #facd58;">
            <p class="title">参与规则</p>
            <p>
              1.每位用户每天有6颗星星生命值，消耗完毕后，可通过复活增加1颗星星。消耗1颗星星可获得掷骰子机会一次，落入格子将获得金币或者小礼物奖励。
            </p>
            <p>
              2.赛道通关后，按照金币累计高低进行排名，最终金币前2名将各获得美的破壁机一台。（若金币数量相同，则以到达终点时间先后顺序排序）。
            </p>
            <p>
              3.旅程中含有惊喜小礼物，包含洁牙券，饮品券，美甲券，腾讯视频会员，美的雨伞等。
            </p>
            <p>
              4.奖品领取方式：30/31号到观音桥重百电器美的空调专柜领取。
            </p>
            <p>
              *游戏最终解释权归腾讯大渝网所有。
            </p>
          </div>
          <img class="btn" src="./assets/btn1.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 骰子动画 -->
    <div class="popupa">
      <div class="wrap">
        <div class="dice-wrap">
          <div class="dice-all ani"></div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/phaser/3.16.2/phaser.min.js"></script>
  <script src="./js/main.js"></script>
</html>
